import { Component } from 'react'
import { connect } from 'react-redux'
import Taro from '@tarojs/taro'
import { View, Text, Button, Image, OpenData } from '@tarojs/components'
import classnames from 'classnames'

import * as api from 'src/api'
import { getUserInfo } from 'src/store/slice/user'
import withPage from 'src/utils/withPage'

import './index.scss'

type PageStateProps = {
  userInfo: { [key: string]: any }
}

type PageDispatchProps = {
  getUserInfo: () => any
}

type PageOwnProps = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

type IState = {
  levelProductList: any[]
  selected: { id?: string; skuId?: string; [key: string]: any }
}

interface Index {
  props: IProps
  state: IState
}

const connectRedux: Function = connect

@connectRedux(
  ({ user }) => ({
    userInfo: user.userInfo,
  }),
  (dispatch) => ({
    getUserInfo() {
      dispatch(getUserInfo())
    },
  })
)
@withPage()
class Index extends Component {
  state: IState = {
    levelProductList: [],
    selected: {},
  }
  componentWillMount() {
    this.getProductLevel()
  }

  getProductLevel = async () => {
    const res = await api.getProductLevel()
    this.setState({ levelProductList: res.list || [] })
  }

  selectProduct(item) {
    this.setState({ selected: item })
  }

  goBuy = async () => {
    const res = await api.addCart({
      productId: Number(this.state.selected.id),
      cartNum: 1,
      isNew: true,
      productAttrUnique: this.state.selected.skuId,
    })
    Taro.navigateTo({
      url: '/pages/order_confirm/index?new=true&cartId=' + res.cartId,
    })
  }

  render() {
    const { userInfo } = this.props
    const { levelProductList, selected } = this.state
    return (
      <View className="user-vip">
        <View className="vip-bg">
          {userInfo.markId === 0 ? (
            <View className="vip-card">
              <View className="account at-row at-row__justify--between">
                <View>
                  <View className="text1">草汁堂会员卡</View>
                  <View className="text2">成为会员 立即省钱</View>
                </View>
              </View>
              <View className="text3">
                根据用户平均消费计算，会员每年预计可省钱
                <text className="text4">¥364</text>
              </View>
            </View>
          ) : (
            <View className="vip-card">
              <View className="account at-row at-row__justify--between">
                <View className="avatar">
                  {userInfo.avatar ? (
                    <Image className="image" src={userInfo.avatar}></Image>
                  ) : (
                    <OpenData
                      type="userAvatarUrl"
                      defaultAvatar={require('src/static/images/avatar.png')}
                    />
                  )}
                </View>
                <View className="nickname">
                  {userInfo.nickname ? (
                    <View>{userInfo.nickname}</View>
                  ) : (
                    <OpenData type="userNickName" />
                  )}
                </View>
                <View>
                  <View className="level">{userInfo.markName}</View>
                  <View className="dec">精力羹优惠2元/包</View>
                </View>
              </View>
              <View className="cumulative at-row at-row__justify--between at-row__align--end">
                <View className="item">No.</View>
                <View className="item no">
                  {userInfo.userNo || '暂无会员卡号，请联系店铺'}
                </View>
                <View className="item">
                  已节省
                  <Text className="money">{userInfo.salePrice || 0}</Text>
                </View>
              </View>
            </View>
          )}
        </View>
        <View className="wrapper at-row at-row__justify--around">
          {levelProductList.map((item) => (
            <View
              className={classnames('item', { on: item.id == selected.id })}
              key={item.id}
              onClick={() => this.selectProduct(item)}
            >
              <View className="title">{item.storeName}</View>
              <View className="price">￥{item.price}</View>
              <View className="level">成为{item.markName || ''}</View>
            </View>
          ))}
        </View>
        {levelProductList.length > 0 && (
          <Button
            className="btn"
            type="warn"
            disabled={!selected.id}
            onClick={this.goBuy}
          >
            立即升级
          </Button>
        )}
      </View>
    )
  }
}

export default Index
